// 多选题
import React, { useState } from "react";

import {
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableOpacity,
} from "react-native";

const ShowChoiceQues = ({ number, QuesContent, isEdit, flag, editAnswer }) => {
  // number++;
  // const QuesContent = {
  //   type: 2, // 2：单选题
  //   needAnswer: true,
  //   title: "调查点类型",
  //   options: ["脱贫村", "其他村"],
  // };
  // console.log("看看题目---", QuesContent);
  // console.log(
  //   "序号---",
  //   number,
  //   "---",
  //   QuesContent.optionFlag.length == QuesContent.options.length
  // );
  const [valueSelected, setValueSelected] = useState(QuesContent.answer);
  let t_value = valueSelected;
  // console.log("看看答案---", valueSelected);

  const [optionFlag, setOptionFlag] = useState(QuesContent.optionFlag);
  // console.log("看看天空设置---", optionFlag);
  return (
    <View style={styles.borderView}>
      <View style={{ flexDirection: "row", marginBottom: 7 }}>
        {QuesContent.needAnswer ? (
          <Text style={{ color: "red", marginRight: 1 }}>* </Text>
        ) : null}
        <Text style={{ fontWeight: "bold", color: "#000", fontSize: 15 }}>
          {(number != "" ? number + ". " : "") + QuesContent.title}
        </Text>
      </View>
      <View>
        {QuesContent.options.map((option, index) => {
          if (typeof QuesContent.optionFlag[index][0] == "undefined")
            console.log("出错了", QuesContent);
          return (
            <View key={index}>
              <TouchableOpacity
                disabled={!isEdit}
                onPress={() => {
                  let value;
                  if (QuesContent.type == 2) {
                    setValueSelected(index);
                    value = {
                      optionFlag: optionFlag,
                      answer: index,
                    };
                  } else if (QuesContent.type == 3) {
                    t_value[index] = !t_value[index];
                    setValueSelected(t_value);
                    value = {
                      optionFlag: optionFlag,
                      answer: t_value,
                    };
                  }
                  editAnswer(flag[0], flag[1], flag[2], value);
                }}
              >
                <View
                  style={{
                    flexDirection: "row",
                    padding: 5,
                    alignItems: "center",
                  }}
                >
                  {QuesContent.type == 2 ? (
                    <View
                      style={[
                        {
                          height: 14,
                          width: 14,
                          borderRadius: 7,
                          borderWidth: 1,
                          borderColor: "#bbb",
                          marginRight: 8,
                          // marginTop: 2,
                          // backgroundColor: "red",
                        },
                        valueSelected === index
                          ? { backgroundColor: "#41C3EE" }
                          : null,
                      ]}
                    ></View>
                  ) : (
                    <View
                      style={[
                        {
                          height: 13,
                          width: 13,
                          // borderRadius: 7,
                          borderWidth: 1,
                          borderColor: "#bbb",
                          marginRight: 8,
                          // marginTop: 2,
                          // backgroundColor: "red",
                        },
                        valueSelected[index]
                          ? { backgroundColor: "#41C3EE" }
                          : null,
                      ]}
                    ></View>
                  )}

                  <View>
                    <Text>{option}</Text>
                  </View>
                </View>
              </TouchableOpacity>
              {QuesContent.type == 2 ? (
                <View>
                  {QuesContent.optionFlag[index][0] &&
                  index == valueSelected ? (
                    <TextInput
                      style={styles.inputBox}
                      multiline={true}
                      // maxLength={500}
                      value={optionFlag[index][1]}
                      placeholder={option}
                      editable={isEdit}
                      onChangeText={(text) => {
                        let t_flag = optionFlag;
                        t_flag[index][1] = text;
                        setOptionFlag([...t_flag]);
                        editAnswer(flag[0], flag[1], flag[2], {
                          optionFlag: optionFlag,
                          answer: valueSelected,
                        });
                        // console.log(optionFlag);
                      }}
                    ></TextInput>
                  ) : null}
                </View>
              ) : (
                <View>
                  {QuesContent.optionFlag[index][0] && valueSelected[index] ? (
                    <TextInput
                      style={styles.inputBox}
                      multiline={true}
                      // maxLength={500}
                      value={optionFlag[index][1]}
                      placeholder={option}
                      editable={isEdit}
                      onChangeText={(text) => {
                        let t_flag = optionFlag;
                        t_flag[index][1] = text;
                        setOptionFlag([...t_flag]);
                        editAnswer(flag[0], flag[1], flag[2], {
                          optionFlag: optionFlag,
                          answer: valueSelected,
                        });
                        // console.log(optionFlag);
                      }}
                    ></TextInput>
                  ) : null}
                </View>
              )}
              <View></View>
            </View>
          );
        })}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  borderView: {
    paddingTop: 10,
    paddingLeft: 15,
    paddingRight: 15,
    paddingBottom: 7,

    // justifyContent: "center",
    // backgroundColor: "#eee",
    // height: "100%",
  },
  inputBox: {
    marginTop: 3,
    marginBottom: 7,
    borderColor: "#ddd",
    borderWidth: 1,
    // height: 100,
    borderRadius: 3,
    padding: 10,
    paddingTop: 5,
    paddingBottom: 5,
    marginLeft: 23,
    marginRight: 5,
    width: "90%",
  },
});

export default ShowChoiceQues;
